<template>
  <div class="wode">
    <Top />
    <div class="touXiang">
      <img
        v-if="arr.length != 0"
        :src="newdata.touxiangImg"
        alt=""
      />
      <img
        v-else
        src="@/assets/wode_imgs/notLogin.jpg"
        alt=""
        @click="tologin()"
      />
    </div>
    <div class="toPersonal" @click="goPersonal()" v-if="arr.length != 0">
      个人主页&nbsp;&gt;
    </div>
    <div v-else></div>
    <main>
      <section>
        <Information :arr="arr" />
        <Miyoubi :arr="arr" />
        <Xuanxiang :arr="arr" @exit="exit"/>
      </section>
    </main>

    <NavBottom />
  </div>
</template>

<script>
import Link from '@/apis/api.js'
import Top from '@/components/wode/wode_top.vue'
import Information from '@/components/wode/information.vue'
import Miyoubi from '@/components/wode/miyoubi.vue'
import Xuanxiang from '@/components/wode/xuanxiang.vue'
export default {
  data(){
    return {
      arr:''
    }
  },
  components:{
    Top,
    Information,
    Miyoubi,
    Xuanxiang
  },
  methods: {
    goPersonal(){
      this.$router.push('/wodePersonal');
    },
    tologin(){
      this.$router.push('/login');
    },
    exit(zhuangtai){
      this.arr = zhuangtai;
    }
  },
  created(){
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }

     //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.arr));
    });
    
    this.$store.dispatch('getinformation',{url:"/data/wode/information"})
  },

  mounted(){
    //token判断用户是否登录
    let token = window.localStorage.getItem('token')||'';
    console.log(token);

    Link("/api/MiYoShe/home/userlogin",'get',{token}).then((ok)=>{
        console.log(ok);
        if(ok.data.login == 1){
          this.arr = '1';
        }else{
          this.arr = '';
        }
    })
  },

  computed:{
    newdata(){
      return this.$store.state.information.data;
    },
  },
}
</script>

<style scoped>
.wode {
  position: relative;
}
.wode main{
  height: 7rem;

}
.wode main section{
  min-height: 6rem;
}
.wode .touXiang {
  width: 0.69rem;
  height: 0.69rem;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 0.87rem;
  left: 0.27rem;
}
.wode .touXiang img {
  width: 100%;
  height: 100%;
}
.wode .toPersonal {
  width: 0.9rem;
  height: 0.3rem;
  background-color: rgb(240, 240, 240);
  position: absolute;
  right: 0;
  top: 1.22rem;
  text-align: center;
  line-height: 0.3rem;
  font-size: 0.14rem;
  border-radius: 0.05rem 0 0 0.05rem;
}
.wode section {
  margin-top: 0.6rem;
  min-height: 3rem;
  padding: 0 0.15rem;
  /* background-color: tomato; */
}
</style>